<template>
  <view class="login-container">
    <!-- 使用与首页相同的导航栏 -->
    <CustomNavBar :showBack="true"></CustomNavBar>
    
    <view class="auth-content">
      <!-- 大标题样式与首页一致 -->
      <view class="big-title">{{ isLoginMode ? $t('login.characters1') : $t('login.characters2') }}</view>
      
      <!-- 表单区域 -->
      <view class="auth-form">
        <view class="input-group">
          <input 
            class="auth-input" 
            :placeholder="$t('login.characters3')"
            placeholder-class="placeholder"
            type="text"
            v-model="formData.email"
          />
          <image class="input-icon" src="/static/icons/email.png"></image>
        </view>
        
        <view class="input-group">
          <input 
            class="auth-input" 
            :placeholder="$t('login.characters4')"
            placeholder-class="placeholder"
            type="password"
            v-model="formData.password"
          />
          <image class="input-icon" src="/static/icons/lock.png"></image>
        </view>
        
        <!-- 注册时显示额外字段 -->
        <view v-if="!isLoginMode" class="input-group">
          <input 
            class="auth-input" 
            :placeholder="$t('login.characters5')"
            placeholder-class="placeholder"
            type="text"
            v-model="formData.username"
          />
          <image class="input-icon" src="/static/icons/user.png"></image>
        </view>
        
        <!-- 登录/注册按钮 - 使用首页相同的按钮样式 -->
        <view class="auth-btn-box">
          <view 
            class="auth-btn" 
            @click="handleSubmit"
          >
            <!-- <image class="icon-mony" src="/static/commonImg/mony.png"></image> -->
            <text class="btn-title">
              {{ isLoginMode ? $t('login.characters1') : $t('login.characters2') }}
            </text>
          </view>
        </view>
      </view>
      
      <!-- 切换登录/注册 -->
      <view class="auth-switch">
        <text class="switch-tip">
          {{ isLoginMode ? $t('login.characters8') : $t('login.characters9') }}
        </text>
        <text 
          class="switch-link" 
          @click="toggleMode"
        >
          {{ isLoginMode ? $t('login.characters10') : $t('login.characters11 ') }}
        </text>
      </view>
      
      <!-- 社交登录 - 与首页合作伙伴风格一致 -->
      <!-- <view class="social-login">
        <view class="divider">
          <view class="divider-line"></view>
          <text class="divider-text">或使用以下方式登录</text>
          <view class="divider-line"></view>
        </view>
      </view> -->
    </view>
    
  </view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss"></style>